<template>
    <section>
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">用户查询</span></strong>
            </div>
            <div class="body-content">
                <el-form :inline="true" size='small'>
                    <el-form-item label="手机号:">
                        <el-input v-model.trim="searchObj.mobile" placeholder="" size='small'></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:">
                        <el-input v-model.trim="searchObj.name" placeholder="" size='small'></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号:">
                        <el-input v-model.trim="searchObj.idCard" placeholder="" size='small' style="width:220px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" size='small' icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
                <!--表格数据-->
                <el-table :data="tableData" v-loading="listLoading" border>
                    <el-table-column type='index' width='70' label="编号"></el-table-column>
                    <el-table-column prop="trueName" width='100' label="姓名"></el-table-column>
                    <el-table-column prop="mobile" label="手机号"></el-table-column>
                    <el-table-column prop="idCard" label="身份证号"></el-table-column>
                    <el-table-column prop="zhifubaoCard" label="支付宝账号"></el-table-column>
                    <!-- <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <router-link target="_blank" :to="{ path: 'userDetails', query: { userId: scope.row.userId, id51: scope.row.id51 }}">查看详情</router-link>
                        </template>
                    </el-table-column> -->
                </el-table>
                <!-- 分页 -->
                <div class="paginationMargin">
                    <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount' @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
import * as api from "../../api/api";
export default {
    data() {
        return {
            listLoading: false, //加载中
            searchObj: {},//查询参数
            tableData: [], //查询列表
            currentPage: 1, // 当前页数
            pageCount: 1, // 总条数
        }
    },
    methods: {
        // 点击查询
        onSubmit(){
            // 查询数据列表
            this.getDataList();
        },
        // 分页点击方法
        handleCurrentChange(val) {
            this.currentPage = val;
            // 查询数据列表
            this.getDataList();
        },
        // 查询数据列表
        getDataList() {
            this.listLoading = true;
            api.queryUserInfo(this.searchObj).then(res => {
                this.listLoading = false;
                this.tableData = res.data.list;
            }).catch(() => {
                this.listLoading = false;
            });
        },
    },
    mounted() {
        // 查询数据列表
        this.getDataList();
    }
}
</script>

<style>
</style>
